<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getAreas, delArea, addArea, getSelect, changeAreas } from '@/api/area.js'
import { message } from 'ant-design-vue'
const selList = ref([])
const flag = ref(false)
const showDialog = ref(false)
const total = ref(null)
const formRef = ref(null)
const arealist = ref([])
const areaForm = reactive({
  areaName: '',
  spaceNumber: '',
  areaProportion: '',
  ruleId: null,
  remark: ''
})
// 列数据
const columns = [
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: '区域名称',
    dataIndex: 'areaName',
    key: 'areaName'
  },
  {
    title: '车位数(个)',
    dataIndex: 'spaceNumber',
    key: 'spaceNumber'
  },
  {
    title: '面积(㎡)',
    dataIndex: 'areaProportion',
    key: 'areaProportion'
  },
  {
    title: '计费规则',
    dataIndex: 'ruleName',
    key: 'ruleName'
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark'
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate'
  }
]
//分页数据
const areaParams = reactive({
  page: 1,
  pageSize: 10
})
// 获取下拉数据
const selectes = async () => {
  const res = await getSelect()
  const newArrey = res.data.rows.map((item) => {
    return {
      value: item.id,
      label: item.ruleName
    }
  })
  selList.value = newArrey
  console.log(selList.value)
}
//渲染下拉数据
const options = ref(selList)
// 获取区域列表
const getAreaAPI = async () => {
  const res = await getAreas(areaParams)
  console.log(res)
  arealist.value = res.data.rows.map((el, index) => ({
    ...el,
    index: (areaParams.page - 1) * areaParams.pageSize + index + 1
  }))
  total.value = res.data.total
}
// 删除区域列表
const del = async (id) => {
  await delArea(id)
  message.success('删除成功')
  getAreaAPI()
}
//新增和编辑区域事件
const onFinish = async () => {
  if (flag.value) {
    await addArea(areaForm)
    message.success('新增成功')
  } else {
    await changeAreas(areaForm)
    message.success('编辑成功')
  }
  formRef.value.resetFields()
  showDialog.value = false
  getAreaAPI()
}
// 新增title
const adds = () => {
  flag.value = true
  showDialog.value = true
  formRef.value.resetFields()
  selectes()
}
//编辑title,数据回写
const changeArea = (row) => {
  flag.value = false
  showDialog.value = true
  areaForm.areaName = row.areaName
  areaForm.spaceNumber = row.spaceNumber
  areaForm.areaProportion = row.areaProportion
  areaForm.ruleId = row.ruleId
  areaForm.remark = row.remark
  areaForm.id = row.id
  selectes()
}
//分页total事件
const showTotal = () => {
  return `总共${total.value}条`
}
//分页事件
const changeCurrent = (page, pageSize) => {
  areaParams.page = page
  areaParams.pageSize = pageSize
  getAreaAPI(areaParams)
}
onMounted(() => {
  getAreaAPI()
})
</script>
<template>
  <!-- 添加按钮 -->
  <a-card>
    <a-button type="primary" @click="adds">添加区域</a-button>
  </a-card>
  <!-- 表单数据 -->
  <a-table
    :dataSource="arealist"
    :columns="columns"
    :pagination="{
      total: total,
      current: areaParams.page,
      pageSize: areaParams.pageSize,
      'show-total': showTotal,
      'show-size-changer': true,
      onChange: changeCurrent,
      pageSizeOptions: ['5', '10', '15', '20', '30']
    }"
  >
    <!-- 操作列编辑和删除按钮 -->
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'operate'">
        <a-button type="link" @click="changeArea(record)">编辑</a-button>
        <a-popconfirm
          cancelText="取消"
          okText="删除"
          title="确定要删除吗"
          @confirm="del(record.id)"
        >
          <a-button type="text" danger>删除</a-button>
        </a-popconfirm>
      </template>
    </template>
  </a-table>
  <!-- 新增和编辑弹框 -->
  <a-modal
    :title="flag ? '新增区域' : '编辑区域'"
    width="600px"
    v-model:visible="showDialog"
    :footer="null"
  >
    <a-form
      @finish="onFinish"
      ref="formRef"
      :model="areaForm"
      :labelCol="{ span: 5, offset: 3 }"
      layout="vertical"
    >
      <!-- 区域名称 -->
      <a-form-item
        name="areaName"
        :rules="[{ required: true, message: '区域名称不能为空', trigger: 'blur' }]"
        label="区域名称"
        :wrapperCol="{ span: 18, offset: 3 }"
      >
        <a-input v-model:value="areaForm.areaName" placeholder="请输入区域名称"></a-input>
      </a-form-item>
      <!-- 车位数 -->
      <a-form-item
        name="spaceNumber"
        :rules="[
          { required: true, message: '车位数不能为空', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '车位数必须是大于0的正整数', trigger: 'blur' }
        ]"
        label="车位数(个)"
        :wrapperCol="{ span: 18, offset: 3 }"
      >
        <a-input
          v-model:value="areaForm.spaceNumber"
          type="number"
          placeholder="请输入车位数"
        ></a-input>
      </a-form-item>
      <!-- 区域面积 -->
      <a-form-item
        name="areaProportion"
        :rules="[
          { required: true, message: '面积不能为空', trigger: 'blur' },
          { pattern: /^(?=.*[1-9])\d*\.?\d+$/, message: '面积必须是大于0数字', trigger: 'blur' }
        ]"
        label="面积(㎡)"
        :wrapperCol="{ span: 18, offset: 3 }"
      >
        <a-input v-model:value="areaForm.areaProportion" placeholder="请输入面积">
          <template><span>㎡</span></template>
        </a-input>
      </a-form-item>
      <!-- 关联计费规则 -->
      <a-form-item
        name="ruleId"
        :rules="[{ required: true, message: '关联计费规则不能为空', trigger: 'blur' }]"
        :wrapperCol="{ span: 18, offset: 3 }"
        label="关联计费规则"
      >
        <a-select v-model:value="areaForm.ruleId" placeholder="请选择关联规则" :options="options">
          <a-select-option>请选择</a-select-option>
        </a-select>
      </a-form-item>
      <!-- 备注 -->
      <a-form-item name="remark" :wrapperCol="{ span: 18, offset: 3 }" label="备注">
        <a-textarea v-model:value="areaForm.remark" placeholder="请输入备注"></a-textarea>
      </a-form-item>
      <!-- 确定和取消按钮 -->
      <a-form-item style="text-align: right">
        <a-space>
          <a-button ghost shape="round" @click="showDialog = false">取消</a-button>
          <a-button type="primary" shape="round" html-type="submit">确定</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<style>
.ant-table-content {
  padding-left: 20px;
}
</style>
